<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机轮播图</title>
    <style>
        * {
            box-sizing: border-box; /*盒子尺寸: 內减模式,  防止 内外边距 设置可能撑大盒子*/
        }

        /* 整个轮播图版面 */
        .轮播图 {
            width: 560px; /* 版面宽高 */
            height: 400px;
            overflow: hidden; /* 溢出:隐藏 */
            margin: 0 auto; /* 版心居中 */
        }

        .轮播图_图片区域 {
            width: 100%; /* 盒子宽随版面(父级), 设置高 */
            height: 320px;
        }

        .轮播图_图片区域 img {
            width: 100%; /* 图片宽高随 父级盒子 */
            height: 100%;
            display: block; /* 显示模式: 块级 */
        }

        .轮播图版面_底板 {
            height: 80px; /* 设置高, 宽随版面(父级) */
            background-color: rgb(100, 67, 68); /* 背景色 */
            padding: 12px 12px 0 12px; /* 内边距: 上, 右, 下, 左 */
            position: relative; /* 定位: 相对定位.  子定父相定位方法*/
        }

        .轮播图版面_底板 .左右切换区域 {
            position: absolute; /* 定位: 绝对定位.  子定父相定位方法*/
            right: 0; /* 偏移量 */
            top: 12px;
            display: flex; /* flex布局 */
        }

        /* 左右切换里 按钮的设置 */
        .轮播图版面_底板 .左右切换区域 button {
            margin-right: 12px; /* 左外边距 */
            width: 28px; /* 宽高 */
            height: 28px;

            appearance: none; /* 这个属性 使元素看上去像一个按钮,官方文档说明 这个不是标准化的,不建议使用 且部分浏览器不支持. 这里这个是教程的代码,所以保留. 了解下就好 */
            border: none;  /*去掉边框线*/

            background: rgba(255, 255, 255, 0.1); /* 背景色, 透明度 */
            color: #fff; /* 文字颜色 */
            border-radius: 4px; /* 圆角属性 */
            cursor: pointer; /* 鼠标图形, 这里效果是鼠标悬停圆点 改变鼠标图形 */
        }

        .轮播图版面_底板 .左右切换区域 button:hover {
            background: rgba(255, 255, 255, 0.2); /* 鼠标悬停状态, 改变颜色 */
        }

        .轮播图版面_底板 p {
            margin: 0;
            color: #fff; /* 文字颜色 大小 */
            font-size: 18px;
            
            margin-bottom: 10px; /* 下外边距 */
        }

        .圆点-滑块区域 {
            margin: 0; /* 外边距 */
            padding: 0; /* 内边距 */
            list-style: none; /* li标签默认的项目图标,清除 */
            display: flex; /* flex布局 */
            align-items: center; /* 侧轴在水平方向，效果圆点 垂直居中 */
        }

        .圆点-滑块区域 li {
            width: 8px; /* 宽高 */
            height: 8px;
            
            margin: 4px; /* 内边距 */
            border-radius: 50%; /* 圆角属性, 这里是把盒子变成圆形 */
            
            background: #fff; /* 背景色 */
            opacity: 0.4; /* 背景色:透明度 ,背景半透明*/
            cursor: pointer; /* 鼠标图形, 这里效果是鼠标悬停圆点 改变鼠标图形 */
        }

        .圆点-滑块区域 .白圆点 {
            width: 12px; /* 宽高 */
            height: 12px;
            opacity: 1; /* 背景色 透明度1, 效果不透明 */
        }
    </style>
</head>
<body>
<!--轮播图-->
<div class="轮播图">
    <div class="轮播图_图片区域">
        <img src="../素材/slider01.jpg" alt=""/>
    </div>
    <div class="轮播图版面_底板">
        <p>对人类来说会不会太超前了？</p>
        <ul class="圆点-滑块区域">
            <li></li> <!-- 每个li是,轮播图的小圆点 -->
            <li></li> <!-- 下面JS方法,添加 "白圆点"类,  相应的li就可以显示对应的白圆点了-->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="左右切换区域">
            <button class="左键">&lt;</button>
            <button class="右键">&gt;</button>
        </div>
    </div>
</div>

<!--JS实现轮播图 随机版-->
<script>
    // 初始数据
    const 数组_对象_轮播图信息 = [
        {图片路径: './素材/slider01.jpg', 文字标题: '对人类来说会不会太超前了？', 底板颜色: 'rgb(100, 67, 68)'},
        {图片路径: './素材/slider02.jpg', 文字标题: '开启剑与雪的黑暗传说！', 底板颜色: 'rgb(43, 35, 26)'},
        {图片路径: './素材/slider03.jpg', 文字标题: '真正的jo厨出现了！', 底板颜色: 'rgb(36, 31, 33)'},
        {图片路径: './素材/slider04.jpg', 文字标题: '让世界通过B站看到东方大国文化', 底板颜色: 'rgb(139, 98, 66)'},
        {图片路径: './素材/slider05.jpg', 文字标题: '快来分享你的寒假日常吧~', 底板颜色: 'rgb(67, 90, 92)'},
        {图片路径: './素材/slider06.jpg', 文字标题: '哔哩哔哩小年YEAH', 底板颜色: 'rgb(166, 131, 143)'},
        {图片路径: './素材/slider07.jpg', 文字标题: '一站式解决你的电脑配置问题！！！', 底板颜色: 'rgb(53, 29, 25)'},
        {图片路径: './素材/slider08.jpg', 文字标题: '谁不想和小猫咪贴贴呢！', 底板颜色: 'rgb(99, 72, 114)'},
    ]

    function 轮播图随机播放(数组_对象) {
        // 得到一个随机数, 作为数组的下标使用
        let 随机下标 = Math.floor(Math.random() * 数组_对象.length)
        // console.log(数组_对象[随机下标].图片路径)

        // 获取DOM元素
        const 轮播图_图片 = document.querySelector('.轮播图 img')
        // 通过 元素.标签属性 = 值, 这里是修改图片的地址
        轮播图_图片.src = 数组_对象[随机下标].图片路径

        // 修改 p标签里文字
        const p标签_文字 = document.querySelector('.轮播图版面_底板 p')
        // innerHTML = 值, 这里是修改 p标签里的文字内容
        p标签_文字.innerHTML = 数组_对象[随机下标].文字标题

        // 修改 轮播图底板颜色
        const 轮播图_底板 = document.querySelector('.轮播图版面_底板')
        //对象.style.样式属性 = 值, 这里是修改背景颜色
        轮播图_底板.style.backgroundColor = 数组_对象[随机下标].底板颜色

        // 圆点, 轮播选中的图片 下面有相对应的白圆点显示
        const 数组_li圆点 = document.querySelectorAll('.圆点-滑块区域 li') // ALL生成的是数组, 这里每一个li是一个对象
        // 元素.classList.add('CSS类名') , 这里是给相应的的 li标签添加 '白圆点'类
        数组_li圆点[随机下标].classList.add('白圆点')
    }

    // 调用函数,并且传参
    轮播图随机播放(数组_对象_轮播图信息)
</script>


</body>
</html>